export const style1 = `
import {PhMenutree} from 'phoeon'
//树数据格式
interface TreeNode{
    action?:string, //节点唯一标识
    title:string,
    icon?:string,
    children?:Array<TreeNode>
}
interface MenuTree{
    current:{
        type:String//当前的活跃节点标识
    },
    trees:{
        type:Array as PropType<Array<TreeNode>>,
        default:()=>[]
    }
    @action //代理子节点的点击事件
}
`;
export const demo1 = `
<ph-menu-tree :trees="menus" current="chrome" @action="onAction"/>
//测试数据
const menus = [{
    title:"浏览器",
    children:[
        {
            title:"谷歌",
            icon:"chrome",
            action:"chrome"
        },
        {
            title:"火狐",
            icon:"firefox",
            action:"firefox"
        },
        {
            title:"苹果",
            icon:"safari",
            action:"safari"
        },
        {
            title:"IE",
            icon:"internet-explorer",
            action:"internet-explorer"
        }
    ]
},{
    title:"火狐",
    icon:"firefox",
    action:"firefox"
},
{
    title:"苹果",
    icon:"safari",
    action:"safari"
},
{
    title:"IE",
    icon:"internet-explorer",
    action:"internet-explorer"
}]
`;
export const style2 = `
import {PhMenu,PhMenuItem,PhSubMenu} from 'phoeon'
interface Menu{
    current:{type:String}//节点唯一标识
    @action //代理子节点的点击事件
}
interface SubMenu{
    title:{type:String},
	icon:{type:String}
}
interface MenuItem{
    title:{type:String},
    icon:{type:String},
    action:{type:String}
}
`;
export const demo2 = `
//theme=<dark|light|primary|success|danger|warning>
<ph-menu theme="dark" current="chrome" @action="onAction">
    <ph-sub-menu title="浏览器">
        <ph-menu-item action="chrome" icon="chrome">谷歌</ph-menu-item>
        <ph-menu-item action="firefox" icon="firefox">火狐</ph-menu-item>
        <ph-menu-item action="safari" icon="safari">苹果</ph-menu-item>
        <ph-menu-item action="internet-explorer" icon="internet-explorer">微软</ph-menu-item>
    </ph-sub-menu>
    <ph-menu-item action="firefox" icon="firefox">火狐</ph-menu-item>
    <ph-menu-item action="safari" icon="safari">苹果</ph-menu-item>
    <ph-menu-item action="internet-explorer" icon="internet-explorer">微软</ph-menu-item>
</ph-menu>
`;
export const script = `
import { defineComponent, ref } from 'vue'
import {
        PhMenuTree,
        PhMenuGroup,
        PhMenu,
        PhMenuItem,
        PhSubMenu,
        PhSider
        } from 'phoeon'
export default defineComponent({
    components:{
        PhMenuTree,
        PhMenuGroup,
        PhMenu,
        PhMenuItem,
        PhSubMenu,
        PhSider
    },
    setup(){
        const current = ref("chrome")
        const current1 = ref("")
        const trees = [{
            title:"浏览器",
            children:[
                {
                    title:"谷歌",
                    icon:"chrome",
                    action:"chrome"
                },
                {
                    title:"火狐",
                    icon:"firefox",
                    action:"firefox"
                },
                {
                    title:"苹果",
                    icon:"safari",
                    action:"safari"
                },
                {
                    title:"IE",
                    icon:"internet-explorer",
                    action:"internet-explorer"
                }
            ]
        },{
            title:"火狐",
            icon:"firefox",
            action:"firefox"
        },
        {
            title:"苹果",
            icon:"safari",
            action:"safari"
        },
        {
            title:"IE",
            icon:"internet-explorer",
            action:"internet-explorer"
        }]
        const onAction = (a:string)=>{
            current.value = a
        }
        const onAction = (a:string)=>{
            current1.value = a
        }
        return {trees,current,current1,onAction,onAction1}
    }
})
`;
export const groupTemplate = `
<ph-menu theme="dark" :current="current" @action="onAction">
    <ph-menu-group title="浏览器">
        <ph-menu-item action="chrome" icon="chrome">谷歌</ph-menu-item>
        <ph-menu-item action="firefox" icon="firefox">火狐</ph-menu-item>
        <ph-menu-item action="safari" icon="safari">苹果</ph-menu-item>
        <ph-menu-item action="internet-explorer" icon="internet-explorer">微软</ph-menu-item>
    </ph-menu-group>
    <ph-menu-group title="浏览器">
        <ph-menu-item action="firefox" icon="firefox">火狐</ph-menu-item>
        <ph-menu-item action="safari" icon="safari">苹果</ph-menu-item>
        <ph-menu-item action="internet-explorer" icon="internet-explorer">微软</ph-menu-item>
    </ph-menu-group>
</ph-menu>
`;
